/* 授权云仓市场 */
<template>
  <el-dialog v-bind="config__" :before-close="cancel">
    <!-- 内容栏 -->
    <template #default>
      <!-- 表格栏 -->
      <el-table ref="table" border :data="data__.dataSource" v-loading="config__.dialogLoading">
        <el-table-column label="商品名称" prop="productName" :width="200"></el-table-column>

        <el-table-column label="商品价格" prop="currentPrice">
          <template slot-scope="scope">
            <span>￥ {{ scope.row.currentPrice | $cent2yuan }}</span>
          </template>
        </el-table-column>

        <el-table-column label="分销奖励金(%)" prop="distributionProportion" :width="140">
          <template slot-scope="scope">
            <SafeInputNumber
              v-if="isEnterpriseUser && scope.row.authCloudWarehouse === 0"
              :disabled="status__.DIALOG_STATUS === options__.ENUM_DIALOG_STATUS.DETAIL"
              v-model="scope.row.distributionProportion"
              :min="0"
              :max="30"
              :precision="2"
              size="small"
            >
              <template slot="append">%</template>
            </SafeInputNumber>
            <span v-else>{{ scope.row.distributionProportion | distributeFilter }}</span>
          </template>
        </el-table-column>

        <el-table-column label="备注" prop="remark" v-if="isBelongAgency"></el-table-column>

        <el-table-column label="云仓授权状态" prop="authCloudWarehouse">
          <template slot-scope="scope">
            <span
              :style="{ 'color': $enum.getEnumByValue($enum.ENUM_CLOUD_MARKET_AUTH_STATUS, scope.row.authCloudWarehouse).color }">
              {{ $enum.getEnumByValue($enum.ENUM_CLOUD_MARKET_AUTH_STATUS, scope.row.authCloudWarehouse).label }}
            </span>
          </template>
        </el-table-column>

        <!-- 操作栏 -->
        <el-table-column label="操作" prop="action">
          <template slot-scope="scope">
            <div>
              <span>
                <el-popconfirm
                  v-if="scope.row.authCloudWarehouse===0"
                  title="确认授权？"
                  @confirm="onAuth(scope)"
                  @onConfirm="onAuth(scope)"
                >
                  <el-tooltip slot="reference" content="授权" placement="top" :open-delay="500">
                    <el-button
                      circle
                      type="primary"
                      :disabled="status__.DIALOG_STATUS === options__.ENUM_DIALOG_STATUS.DETAIL"
                      icon="el-icon-s-promotion"
                      :loading="scope.row.loading"
                    />
                  </el-tooltip>
                </el-popconfirm>

                <el-popconfirm
                  v-if="scope.row.authCloudWarehouse===1"
                  title="确认取消授权？"
                  @confirm="onCancelAuth(scope)"
                  @onConfirm="onCancelAuth(scope)"
                >
                  <el-tooltip slot="reference" content="取消授权" placement="top" :open-delay="500">
                    <el-button
                      circle
                      type="danger"
                      icon="el-icon-close"
                      :loading="scope.row.loading"
                      :disabled="status__.DIALOG_STATUS === options__.ENUM_DIALOG_STATUS.DETAIL"
                    />
                  </el-tooltip>
                </el-popconfirm>
              </span>
            </div>
          </template>
        </el-table-column>
        <!-- 空数据插槽 -->
        <template slot="empty">
          <p>暂无数据</p>
        </template>
      </el-table>

      <form-item-tip v-if="isBelongAgency">
        1、授权云仓市场后，全平台商户均可采购该商品进行分销。分销成功会获得相应比例的分销奖励金。<br>
        2、如果有引入方的企业，授权云仓市场分销，需要填写引入方分成比例，并提交引入方审核。分销成功引入方获得相应比例的分成。<br>
        3、平台手续费比例+分享奖励金比例+分销奖励金比例+引入方分成比例<=30%。<br>
      </form-item-tip>

      <form-item-tip v-else>
        1、授权云仓市场后，全平台商户均可采购该商品进行分销。分销成功会获得相应比例的分销奖励金。<br>
        2、平台手续费比例+分享奖励金比例+分销奖励金比例<=30%。<br>
      </form-item-tip>

    </template>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'

const ENUM_DIALOG_STATUS = {
  CREATED: 'CREATED',
  DETAIL: 'DETAIL',
  UPDATE: 'UPDATE'
}

const urlPrefix = '/product/product-channel'

export default {
  filters: {
    priceFilter (val) {
      return val !== undefined && val !== null
        ? `￥${val}`
        : undefined
    },
    distributeFilter (val) {
      return val !== undefined && val !== null
        ? `${val}%`
        : undefined
    }
  },
  computed: {
    ...mapGetters([
      'isPlatFormUser',
      'isEnterpriseUser',
    ])
  },
  data () {
    return {
      options__: {
        ENUM_DIALOG_STATUS
      },
      status__: {
        DIALOG_STATUS: ENUM_DIALOG_STATUS.DETAIL
      },
      config__: {
        width: '1300px',
        top: '16vh !important',
        visible: false,
        title: '授权云仓市场',
        showClose: true,
        lockScroll: true,
        closeOnClickModal: false,
        customClass: 'el-auth-merchant-channel',
        confirmLoading: false,
        dialogLoading: false,
        destroyOnClose: true
      },
      data__: {
        openParams: undefined,
        dataSource: []
      },
      isBelongAgency: false
    }
  },
  mounted () {
    // 详情查看
    this.$bus.on('auth-cloud-market:detail', openParams => {
      this.status__.DIALOG_STATUS = ENUM_DIALOG_STATUS.DETAIL
      this.onOpen(openParams)
    })

    // 编辑
    this.$bus.on('auth-cloud-market:update', openParams => {
      this.status__.DIALOG_STATUS = ENUM_DIALOG_STATUS.UPDATE
      this.onOpen(openParams)
    })
  },
  destroyed () {
    this.$bus.off('auth-cloud-market:detail')
    this.$bus.off('auth-cloud-market:update')
  },
  methods: {
    // 请求 - 获取表格数据
    getTableData () {
      // getById 查询云仓授权详情
      this.config__.dialogLoading = true
      return this.$POST('/sot-admin-api/product/cloud-store/selectOneByProductId', {
        id: this.data__.openParams?.productId,
      }).then(({ data }) => {
        this.data__.dataSource = [data]
      }).finally(_ => {
        setTimeout(() => { this.config__.dialogLoading = false }, 300)
      })
    },
    // 事件 - 确认授权
    onAuth (scope) {
      if (this.$isEmpty(scope.row.distributionProportion)) {
        this.$swal.error('请输入分销奖励金')
        return
      }

      this.$set(scope.row, 'loading', true)

      // 授权云仓市场
      return this.$POST('/sot-admin-api/product/cloud-store/authCloudWarehouse', {
        productId: this.data__.openParams?.productId,
        distributionProportion: parseFloat(scope.row.distributionProportion),
        agentProportion: parseFloat(scope.row.agentProportion)
      }).then(() => {
        this.$swal.success('授权成功')
        this.getTableData()
      }).finally(() => {
        setTimeout(() => { this.$set(scope.row, 'loading', false) }, 300)
      })
    },
    // 事件 - 取消授权
    onCancelAuth (scope) {
      this.$set(scope.row, 'loading', true)

      this.$POST('/sot-admin-api/product/cloud-store/cancelAuthCloudWarehouse', { id: this.data__.openParams?.productId, }).then(() => {
        this.$swal.success('取消授权成功')
        this.getTableData()
      }).finally(() => {
        setTimeout(() => { this.$set(scope.row, 'loading', false) }, 300)
      })
    },
    // 事件 - dialog打开
    onOpen (openParams) {
      this.isBelongAgency = openParams.row.belongAgencyId != null && openParams.row.belongAgencyId !== ''
      this.data__.openParams = openParams
      this.getTableData()
      this.config__.visible = true
    },
    // 事件 - dialog关闭
    cancel () {
      this.config__.visible = false
      Object.assign(this.$data, this.$options.data.call(this))
      this.$bus.emit('global:list:refresh')
    }
  }
}
</script>

<style lang="scss">
</style>
